<template>
	<view class="header">
		<u-navbar :border-bottom="false" title="提审资料详情	" title-size="32" title-width="500"></u-navbar>
		<view class="card">
			<view class="info">
				<view class="flex flex-jc-sb main">
					<view>申请人</view>
					<view class="flex">
						<view>{{userInfo.name}}</view>
						<view style="margin-left: 10rpx;color: #FBB000;">已认证</view>
					</view>
				</view>
				<view class="flex flex-jc-sb main">
					<view>联系电话</view>
					<view>
						{{userInfo.phone}}
					</view>
				</view>
				<view class="flex flex-jc-sb main">
					<view>身份证</view>
					<view>
						{{userInfo.idcardno}}
					</view>
				</view>
				<view class="flex flex-jc-sa" style="text-align: center;">
					<view>
						<view class="img"><image :src="userInfo.faceimg" mode="aspectFill"></image></view>
						<view>身份证正面</view>
					</view>
					
					<view>
						<view class="img"><image :src="userInfo.backimg" mode="aspectFill"></image></view>
						<view>身份证反面</view>
					</view>
				</view>
			</view>
			<view class="info">
				<view class="flex flex-jc-sb main">
					<view>婚姻状况</view>
					<view>
						{{userInfo.marital_Status_Name}}
					</view>
				</view>
				<view class="flex flex-jc-sb main">
					<view>工作状况</view>
					<view>
						{{userInfo.work_Status_Name}}
					</view>
				</view>
				<view class="flex flex-jc-sb main">
					<view>教育水平</view>
					<view>
						{{userInfo.education_Level_Name}}
					</view>
				</view>
				<view class="flex flex-jc-sb main">
					<view>住房状况</view>
					<view>
						{{userInfo.housing_Status_Name}}
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				userInfo:{}
			}
		},
		onLoad(id) {
			this.id = id.id
			console.log(id)
		},
		created() {
			this.getOrderPersonal()
		},
		methods: {
			async getOrderPersonal(){
				try{
					let data = {
						"order_Buy_Car_Id": this.id
					}
					const res = await this.$api.order.getOrderPersonal(data)
					console.log(res)
					this.userInfo = res.data
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-color: rgb(246, 246, 246);
		height: 100vh;

		.info {
			margin: 20rpx auto;
			padding: 0 24rpx;
			width: 702rpx;
			line-height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
			border-radius: 10rpx;

			.main {
				border-bottom: 2rpx solid #F6F6F6;
			}
			.img{
				width: 260rpx;
				height: 164rpx;
				border-radius: 10rpx;
				// border: 2rpx solid red;
					image{
						width: 100%;
						height: 100%;
						// border: 2rpx solid red;
					}
			}
		}
	}
</style>
